<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天津国展WMTS服务展示地图 - 3857</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:3857');
    // console.log(ol.proj.fromLonLat([117.33097779802539, 38.99778724358142]));
    // console.log(ol.proj.fromLonLat([117.41089178128749, 39.055557292249546]));
    projection.setExtent([1.305328407897826E7, 4715106.567885634, 1.307746959098715E7, 4737352.443334405]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    console.log(projectionExtent);
    const centerX = (projectionExtent[0] + projectionExtent[2]) * 0.5;
    const centerY = (projectionExtent[1] + projectionExtent[3]) * 0.5;
    const origin = ol.proj.fromLonLat([117.25964596100181, 39.1093869130583]);
    // const origin = [1.305328407897826E7, 4737352.443334405];
    console.log('origin:', origin);


    const size = ol.extent.getWidth(projectionExtent) / tileSize;

    const resolutions = [
        94.47465628472656,
        47.23732814236328,
        23.61866407118164,
        11.80933203559082,
        5.90466601779541,
        2.952333008897705,
        1.4761665044488526,
        0.7380832522244263,
        0.36904162611221314,
        0.18452081305610657,
        0.09226040652805328,
        0.04613020326402664,
        0.02306510163201332,
        0.01153255081600666,
        0.00576627540800333,
        0.002883137704001665,
        0.0014415688520008326
    ];
    const matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];


    console.log(ol.proj.transform([1.305328407897826E7, 4737352.443334405], 'EPSG:3857', 'EPSG:4326'));
    // console.log(ol.proj.transform([13061224.702753073, 4721354.619165434], 'EPSG:3857', 'EPSG:4326'));
    // console.log(ol.proj.transform([13070120.686677072, 4729632.805283699], 'EPSG:3857', 'EPSG:4326'));


    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        extent: projectionExtent,
        matrixIds: matrixIds
    });

    // const url = `https://gis.ncectj.com:9791/iserver/services/map-TJGZ_wmts/wmts100`;
    const url = `https://emergency.ncectj.com:9999/iserver/services/map-TJGZ_wmts/wmts100`;

    const wmtsSource = new ol.source.WMTS({
        url,
        layer: 'TJGZ',
        matrixSet: 'Custom_TJGZ',
        format: 'image/png',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default',
        wrapX: false
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    // const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:3857');
    // console.log(circlePoint);
    // const centerPoint = [13065672.694715071, 4725493.712224566];
    // const centerPoint = ol.proj.transform([117.37093478965642, 39.0266781695928], 'EPSG:4326', 'EPSG:3857');
    // const centerPoint = ol.proj.transform([117.36723265094196,39.01867944966108], 'EPSG:4326', 'EPSG:3857');
    // const centerPoint = ol.proj.transform([117.367233,39.018679], 'EPSG:4326', 'EPSG:3857');
    // const centerPoint = ol.proj.transform([117.377487,39.025226], 'EPSG:4326', 'EPSG:3857');
    // const centerPoint = ol.proj.transform([117.38197511314101, 39.02650005723507], 'EPSG:4326', 'EPSG:3857');
    const centerPoint = ol.proj.transform([117.37309700,39.02780600], 'EPSG:4326', 'EPSG:3857');
    // const centerPoint = ol.proj.transform([116.299170,40.045220], 'EPSG:4326', 'EPSG:3857');
    // const centerPoint = [13066528.14, 4725391.78];

    // const centerPoint = [centerX, centerY];
    // console.log('centerPoint:', centerPoint);
    // console.log('centerPoint 4326:', ol.proj.toLonLat(centerPoint));

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(centerPoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const topLeftPoint = [projectionExtent[0], projectionExtent[3]];

    const topLeftIconFeature = new ol.Feature({
        geometry: new ol.geom.Point(topLeftPoint)
    });

    topLeftIconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 1,
            maxZoom: 19,
            minZoom: 1,
            resolutions
        })
    });
    // console.log(ol.proj.transform([117.36935115099716, 39.02777214997664], 'EPSG:4326', 'EPSG:3857'));
    /*setTimeout(() => {
        map.getView().animate({
            // center:[13065672.694715071,-6616576.019451665],
            zoom: 4,
            center: [13065496.404865922, 4725650.475865663],
            duration: 300
        });
    }, 2000);*/

    /*setTimeout(() => {
        const tempCenter = ol.proj.transform([117.37093478965642, 39.0266781695928], 'EPSG:4326', 'EPSG:3857');
        console.log(tempCenter);
        map.getView().setCenter(tempCenter);
        map.getView().setZoom(3);
    }, 4000);*/
</script>
</html>